import splitpane, { ContextProps } from "@/components/SplitPane";
import { useSensorHistory } from "@/hooks/useSensorHistory";
import { dataFormat } from "@/utils/format";
import { defineComponent } from "vue";
import "../model.scss";
const enum FileType {
	jpg = "jpg",
	png = "png",
	mp4 = "mp4",
	txt = "txt",
	pdf = "pdf",
	ppt = "ppt",
	word = "word"
}
const PreviewFile: any = {
	image: [FileType.jpg, FileType.png],
	video: [FileType.mp4]
};
export default defineComponent({
	components: { splitpane },
	props: {
		dataInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		sn: {
			type: String,
			default() {
				return "";
			}
		},
		dataKey: {
			type: String,
			default() {
				return "";
			}
		}
	},
	emits: ["fileInfo"],
	setup(props, { emit }) {
		const state = reactive({
			dataList: [],
			timeRange: "",
			pagination: { page: 1, pageSize: 20 },
			fileInfo: {
				fileType: "",
				fileUrl: ""
			},
			settingLR: {
				minPercent: 20,
				defaultPercent: 20,
				split: "vertical"
			} as ContextProps
		});
		const { featchHistory } = useSensorHistory(props.sn, props.dataKey);
		onMounted(() => {
			featchHistoryData();
		});
		//查询历史数据
		const featchHistoryData = async () => {
			let res = await featchHistory({
				startTime: state.timeRange ? state.timeRange + " 00:00:00" : "",
				endTime: state.timeRange ? state.timeRange + " 23:59:59" : ""
			});
			let result = (res.result as any) || [];
			result = result.reverse();
			state.dataList = result.map((item: any) => {
				let param = item.value.split("/");
				item.name = param[param.length - 1];
				return item;
			});
		};

		//生成内存分页
		const pageDataList = computed<any[]>(() => {
			let start = (state.pagination.page - 1) * state.pagination.pageSize;
			let end = start + state.pagination.pageSize;
			return state.dataList.slice(start, end);
		});

		//生成文件URL
		const loadFileInfo = (row: any) => {
			if (row.value) {
				let param = row.value.split(".");
				state.fileInfo.fileType = param[param.length - 1];
				state.fileInfo.fileUrl = row.value;
			} else {
				state.fileInfo.fileType = "";
				state.fileInfo.fileUrl = "";
			}
			emit("fileInfo", state.fileInfo.fileUrl);
		};
		return () => {
			return (
				<div class="h-full">
					<splitpane splitSet={state.settingLR}>
						{{
							paneL: () => {
								return (
									<div class="h-full">
										<div class="p-2 flex items-center">
											<el-date-picker
												class="mr-2"
												format="YYYY-MM-DD"
												value-format="YYYY-MM-DD"
												v-model={state.timeRange}
												style="width:180px"
												placeholder="日期"
											/>
											<el-button onClick={featchHistoryData}>
												<i class="iconfont iconbx-sync" />
												查询
											</el-button>
										</div>
										<el-table
											show-header={false}
											style="height:calc(100% - 80px)"
											class="file-table"
											data={pageDataList.value}
											stripe
											highlight-current-row
											onRowClick={loadFileInfo}
										>
											<el-table-column
												align="center"
												type="index"
												width="auto"
												index={(i: number) => (state.pagination.page - 1) * state.pagination.pageSize + i + 1}
											/>
											{/* <el-table-column prop="name" label="文件名" show-overflow-tooltip /> */}
											<el-table-column align="center" prop="updateTime" label="更新时间">
												{{
													default: (scope: any) => {
														return dataFormat("datetime", scope.row.updateTime);
													}
												}}
											</el-table-column>
										</el-table>
										<div class="flex justify-end pt-1 pr-2">
											<el-pagination
												class="file-table-pagination"
												v-model:current-page={state.pagination.page}
												v-model:page-size={state.pagination.pageSize}
												pager-count={3}
												page-sizes={[10, 50, 100, 500]}
												small
												layout="total, sizes, prev, pager, next"
												total={state.dataList.length}
											/>
										</div>
									</div>
								);
							},
							paneR: () => {
								return (
									<div class="w-full h-full flex">
										{!state.fileInfo.fileType ? (
											<div style="margin: auto;font-size: 20px;color: #aaa;">请选择左侧文件进行预览</div>
										) : null}
										{/* 图片 */}
										{PreviewFile.image.includes(state.fileInfo.fileType) ? (
											<el-image
												src={state.fileInfo.fileUrl}
												hide-on-click-modal
												fit="fill"
												preview-src-list={[state.fileInfo.fileUrl]}
												style="width: 100%; height: 100%"
											/>
										) : null}

										{/* mp4 */}
										{PreviewFile.video.includes(state.fileInfo.fileType) ? (
											<video
												src={state.fileInfo.fileUrl}
												controls
												autoplay
												style="width:100%;height:100%;background:#000"
											></video>
										) : null}
									</div>
								);
							}
						}}
					</splitpane>
				</div>
			);
		};
	}
});
